<template>
  <div class="userinfo-container">
    <el-avatar shape="square" :src="avatarUrl" :size="size"></el-avatar>
    <el-descriptions class="margin-top" title="我的中心" :column="2" border>
      <template slot="extra">
        <el-button type="primary" size="small">操作</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label"> unid </template>
        {{ userInfo.unid }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 账号 </template>
        {{ userInfo.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> vip等级 </template>
        {{ userInfo.vipLevel }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> vip到期时间 </template>
        <el-tag size="small" style="background-color: #f56c6c; color: #fff; height: 32px; line-height: 30px;">{{ vipExpries }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 昵称 </template>
        <el-tag size="small" style="background-color: #67c23a; color: #fff; height: 32px; line-height: 30px;">{{ userInfo.nickname }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 手机号 </template>
        {{ userInfo.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 角色名称 </template>
        {{ userInfo.roleName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 性别 </template>
        <el-tag size="small" v-if="userInfo.sex === '♂'">女</el-tag>
        <el-tag size="small" v-else>男</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 省份 </template>
        {{ userInfo.province }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 城市 </template>
        {{ userInfo.city }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// 格式时间插件
import moment from 'moment'
export default {
  data() {
    return {
      size: 200
    }
  },
  computed: {
    ...mapState(['userInfo']),
    avatarUrl() {
      //如果用户没有头像,就使用默认头像,如果有,就使用用户头像;
      return this.userInfo?.headimgurl
        ? this.userInfo?.headimgurl
        : 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
    },
    vipExpries() {
      //vip过期时间
      let stamp = this.userInfo.vipStamp
      let date = moment(stamp).format('YYYY-MM-DD HH:mm:ss')
      return date
    }
  },
  meta: {
    title: 'wdzx',
    icon: 'iconfont icon-wode'
  }
}
</script>

<style></style>
